<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <script src="/public/js/vue.js"></script>
    <script src="/public/js/axios.js"></script>
    <script src="/public/js/axios-config.js"></script>
</head>
<body>
<div id="app">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 电影分类管理</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <a class="button border-green" href="/admin/category/updateoradd.html"><span
                            class="icon-edit"></span> 添加</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th>编号</th>
                <th>分类名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--在这里遍历列表显示记录-->
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <a class="btn btn-sm btn-warning" :href="'updateoradd.html?id='+item.id">修改</a>
                    <button class="btn btn-sm btn-danger" @click="del(item.id)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="3" >
                    <nav aria-label="Page navigation justify-content-center">
                        <ul class="pagination">
                            <li class="page-item" v-if="page.hasPreviousPage">
                                <a class="page-link" href="#" @click="goto(page.prePage)">上一页</a>
                            </li>
                            <li :class="'page-item'+(page.pageNum===item?'active':'')" v-for="item in page.navigatepageNums" >
                                <a class="page-link"  href="#" @click="goto(item)">{{item}}</a>
                            </li>
                            <li class="page-item"v-if="page.hasNextPage">
                                <a class="page-link" href="#" @click="goto(page.nextPage)">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>
            </tbody>

        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        'el': '#app',
        'data': {
            list: [],
            page: {},
            pageNum: 1,
            pageSize: 5
        },
        'methods': {
            goto(pn){
                this.pageNum=pn;
                this.loadData()
            },
            loadData(){
                let url = '/api/v1/category/page'
                axios.post(url,{
                    "pageNum":this.pageNum,
                    "pageSize": this.pageSize
                }).then(res =>{
                    if (res.code === 200) { // 假设成功状态码是200
                        this.list = res.data.list;
                        this.page = res.data;
                    } else {
                        alert('加载数据失败');
                    }
                })
            },
            del(cid){
                if(confirm('确定要删除吗？')){
                    let url = '/api/v1/category/remove/'+cid
                    axios.post(url)
                        .then(res =>{
                            if(res.code === 200){
                                alert(res.message)
                                this.loadData()
                            }

                        })
                }
            }
        },
        mounted() {
            this.loadData()
        }
    })


</script>
</body>
</html>